<template>
	<view :style="{height:windowHeight+'px'}" class="content">
		<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" left-text="返回" title="任务详情" @clickLeft="back" />
			<view class="w33">
				<view class="w33o">
					<text>任务编号：</text>
					<text>OR1232324332y3838767</text>
				</view>
				<view class="w33t">
					<view>
						<text class="w33tt">维修进度：</text>
						<text class="w33tb">等待处理</text>
					</view>
					<view>
						<text>任务时效：</text>
						<text><text class="numStyle">0</text>天<text class="numStyle">6.6</text>小时</text>
					</view>
				</view>
				<view class="w33s">
					<view>
						<text class="name">许原厂</text><text class="jindu ml5">正在处理中</text>
					</view>
					<view class="lianxi" @click="callPhone">
						联系他 >
					</view>
				</view>
			</view>
			<view class="w66">
				<view class="w66t">
					<uni-card :isShadow="false">
						<view class="flex-b">
							<view class="tb">
								<view>
									<text class="station">大兴区xxxx站点</text>
									<view class="ml5"><uni-tag  text="维修单" type="success" /></view>
									
								</view>
								<view>
									<text class="waringS">严重告警</text>
								</view>
								
							</view>
							<view class="bb"><uni-tag text="流量计"  /></view>
						</view>
						<view class="textmore">
							<text>任务地址：北京市大兴区双龙大道129号</text>
							<text>发布时间：2023-11-07 21:30</text>
							<text>接收时间：2023-11-07 21:30</text>
						</view>
					
					</uni-card>
				</view>
				<view class="w66b">
					<uni-section title="故障说明" titleFontSize="18px" type="line" padding sub-title="补充说明" subTitleColor="#222222" subTitleFontSize="16px">
						<view  style="color: #666666;padding:0 1rem;">
							设备无法接收到数据
						</view>
					</uni-section>	
					<uni-section title="处理要点" titleFontSize="18px" type="line" padding >
						<view  style="color: #666666;padding:0 1rem;">
							这根据之前已整理的处理要点文字进行展示这根据之前已整理的处理要点文字进行展示这根据之前已整理的处理要点文字进行展示
						</view>
					</uni-section>
				</view>
			</view>
			<view class="btnStyle">
				<view class="btnDiv" @click="banli">
					<button type="primary" plain="true">办理</button>
				</view>
				
			</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
			
			
			
			
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		
			callPhone() {
		      // 电话号码为示例，请替换为实际需要拨打的电话号码
		      uni.makePhoneCall({
		        phoneNumber: '13462013124', // 电话号码
		        success: function () {
		          console.log('拨号成功');
		        },
		        fail: function () {
		          console.log('拨号失败');
		        }
		      });
		    },
			banli(){
				uni.navigateTo({
					url:"/pages/myrw/banli"
				})
			}
		
		
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.btnStyle{
			position: fixed;bottom: 1rem;width: 100%;display: flex;    align-items: center;
			justify-content: center;
			.btnDiv{
				width: 80%;
			}
		}
		display: flex;
		flex-direction: column;
		.ml5{
			display: inline-block;margin-left: 1rem;
		}
		.w33{
			width: 100%;
			height: 33%;
			background: linear-gradient( 180deg, #007EF3 0%, #81BEFF 100%);
			.w33o{
				width: 94%;
				padding: 2% 3%;
				height: 2.5rem;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 1rem;
				color: #FFFFFF;
				line-height: 38px;
				text-align: left;
				font-style: normal;
				border-bottom: 1px solid white;
			}
			.w33t{
				width: 94%;
				padding: 2% 3%;
				height: 3.5rem;
				line-height: 3.5rem;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 1rem;
				color: #FFFFFF;
				font-style: normal;
				display: flex;
				justify-content: space-between;
				.w33tt{
					font-size: 1.1rem;
				}
				.w33tb,.numStyle{
					font-size: 1.3rem;
					font-weight: 500;
				}
				
			}
			.w33s{
				width: 94%;
				margin: 2% 3%;
				background-color: #FFFFFF;
				border-radius: 10px;
				height: 2.5rem;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 1rem;
				font-style: normal;
				display: flex;
				justify-content: space-between;
				align-items: center;
				view{
					padding: 0 10px;
					.name{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 1.1rem;
						color: #222222;
						text-align: left;
						font-style: normal;
					}
					.jindu{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 1rem;
						color: #a19d9d;
						text-align: left;
						font-style: normal;
						margin-left: 1rem;
					}
					.lianxi{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 1rem;
						color: #222222;
						text-align: right;
					}
				}
			}
			
		}
		
		.w66{
			width: 100%;
			height: 66%;
			position: relative;
			.w66t{
				width: 100%;
				position: absolute;
				height: 8rem;
				top: -4.5rem;
				.flex-b{
					.tb{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.station{
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 1.2rem;
							color: #222222;
							line-height: 40px;
							text-align: left;
							font-style: normal;
						}
						.waringS{
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 0.9rem;
							color: #FF3300;
							line-height: 50px;
							text-align: right;
							font-style: normal;
						}
					}
					.bb{
					}
				}
				.textmore{
					padding: 1rem 0 0.5rem 0;
					text{
						display: block;
						line-height: 2rem;
						color: #222222;
					}
				}
			}
			.w66b{
				margin-top: 10rem;
			}
		}
	}
</style>
